<template>
  <div id="top-back">
    <span class="back" @click="back">
      <i class="iconfont icon-close"></i>
    </span>
    <span class="text">{{siteName}}</span>
  </div>
</template>

<script type="text/ecmascript-6">
  import {siteName} from 'common/js/config'

  export default {
    props: {
      siteName: {
        type: String,
        default: siteName
      }
    },
    methods: {
      back() {
        this.$router.goBack()
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "~common/scss/const";

  #top-back {
    width: 100%;
    height: 45px;
    background-color: $color-background-ll;
    color: $color-text-w;
    box-sizing: border-box;
    display: flex;
    overflow: hidden;
    align-items: center;
    span {
      display: inline-block;
      color: $color-text-w;
      &.back {
        flex: 0 0 45px;
        height: 45px;
        width: 45px;
        text-align: center;
        line-height: 45px;
        cursor: pointer;
        .iconfont {
          font-size: $font-size-large;
        }
      }
      &.text {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: $font-size-medium-x;
        margin-left: 5px;
      }
    }
  }
</style>
